<template>
    <div class="app">
        <!-- navbar -->
       <van-nav-bar
            :title="title"
            left-text=""
            v-show="isShowNavbar"
            @click-left="$router.back()"
            left-arrow
        />
     
        <!-- 匹配根路由 -->
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
       
    </div>
</template>

<script>
    export default {
        name:"App",
        data(){
            return {
                isShowNavbar: false,
                title:"喜多多"
            }
        },
        watch:{
            '$route':{
                handler:function(newRoute,oldRoute){
                    // console.log('app-watch')
                    // 是主页则隐藏navbar,否则显示
                    let { isMainPage,title } = newRoute.meta 
                    this.title = title;
                    if(isMainPage){
                        // TODO...
                        this.isShowNavbar = false
                    }else {
                        this.isShowNavbar = true
                    }
                },
                // 立即执行（刷新也会执vcxz行）
                immediate: true
            },
            netStatus:{
                 // 监听网络状态变化
                handler:function(newStatus,oldStatus){
                  if(newStatus === true){
                      this.$dialog.alert({message:"链接网络成功"})
                  }else {
                      this.$dialog.alert({message:"网络异常，请检查网络"})
                  }
                },
            }

        },
        methods:{
            updateNetStatus(e){
                const {type} = e;
                this.netStatus = type === 'online' ? true : false
            }
        },
        mounted() {
            // 监听网络状态的改变
            window.addEventListener('online',this.updateNetStatus)
            window.addEventListener('offline',this.updateNetStatus)
        },
       
    }
</script>
<style lang="scss">
    // @import "./assets/css/common.scss" ;
    html {
        scroll-behavior: smooth;
    }
    .app {
        min-width: 320px;
        max-width: 750px;
        margin: 0 auto;
    }

    * {
        box-sizing: border-box;
    }
</style>

